const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  output: {
    filename: 'scripts/[name].[chunkhash:5].js',
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  // 开发服务器的配置
  devServer: {
    port: 8000,
    open: true,
    // 跨域 ：当浏览器  一个网页 向一个服务器请求资源的时候
    // 如果这个网页的 协议 域名 端口  与 服务器的协议 域名 端口 不一致的时候 就会发生跨域
    //  虽然请求 发出去了 服务器也响应了 但浏览器会拦截调响应 并返回 一个错误 说跨域了
    // 如果 服务器 在响应里面 告诉浏览器说 可以跨域 浏览器就不会拦截调响应了
    proxy: {
      //代理规则
      // 当我
      // 当本地开发的时候 请求 www.duyiedu.com/api/xxx 接口的时候
      // 浏览器 看到 我们的请求 是 从 locallHost 发出的 和 www.duyiedu.com 不是一个域 就好拦截掉这个请求的响应说跨域了

      // 如果 直接改成写 locallHost/api/xxx 接口的时候 就会直接 404 因为这是 直接去请求了本地的 服务器接口
      // 生产环境写出 www.duyiedu.com/api/xxx 然后 生产环境 根据环境变量写成 locallHost/api/xxx 这样
      // 所以需要  开发服务做成代理 将 上面的接口 代理到 target 服务器 去 这样就不会 404了 也不会有跨域问题了
      '/api': {
        // 匹配到了 /api 正则表达式  都去请求 target 目标服务器的接口
        target: 'http://open.duyiedu.com',
        changeOrigin: true, //更改请求头中的host和origin 这样 目标服务器 就会认可这个请求
        // 如果不改的话 origin 还是 locallHost  目标服务器就会拒绝这个请求
      },
    },
  },
  stats: {
    modules: false,
    colors: true,
  },
};
